<template>
  <div>
    <a-button @click="handleAdd" type="primary" icon="plus" style="margin-bottom: 16px;">新增</a-button>

    <a-table
      ref="table"
      size="middle"
      bordered
      :rowKey="record => record.materialCode"
      :scroll="{ x: true }"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <template slot="materialCode" slot-scope="text, record">
        <div>
          <HfMaterialSearchSelectTag
            v-if="record.editable"
            v-model="record.materialCode"
            @change="onMaterialChange(arguments, record)"
          ></HfMaterialSearchSelectTag>
          <template v-else slot-scope="text, record">
            {{ record.materialCode }}
          </template>
        </div>
      </template>
      <template slot="number" slot-scope="text, record">
        <a-input-number v-model:value="record.number" v-if="record.editable"></a-input-number>
        <span v-else>{{ text.toFixed(4) }}</span>
      </template>
      <template slot="action" slot-scope="text, record">
        <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="() => save(record)">保存</a>
            <a-divider type="vertical" style="background-color: grey"></a-divider>
            <a @click="() => cancel(record)">取消</a>
          </span>
          <span v-else>
            <a @click="edit(record)">编辑</a>
            <a-divider type="vertical" style="background-color: grey"></a-divider>
            <a @click="deleteRecord(record)">删除</a>
          </span>
        </div>
      </template>
    </a-table>
  </div>
</template>

<script>
import HfMaterialSearchSelectTag from '@comp/HfManual/HfMaterialSearchSelectTag.vue'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'SelectMaterialTable',
  mixins: [JeecgListMixin],
  components: { HfMaterialSearchSelectTag },
  data() {
    return {
      disableMixinCreated: true,
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '物料代码',
          align: 'center',
          dataIndex: 'materialCode',
          scopedSlots: { customRender: 'materialCode' }
        },
        {
          title: '物料名称',
          align: 'center',
          dataIndex: 'materialName'
        },
        {
          title: '规格型号',
          align: 'center',
          dataIndex: 'sap'
        },
        {
          title: '单位',
          align: 'center',
          dataIndex: 'unit_dictText'
        },
        {
          title: '物料类型',
          align: 'center',
          dataIndex: 'materialType_dictText'
        },
        {
          title: '单箱数',
          align: 'center',
          dataIndex: 'perNumber'
        },
        {
          title: '仓库',
          align: 'center',
          dataIndex: 'warehouse_dictText'
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'number',
          scopedSlots: { customRender: 'number' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      tableId: []
    }
  },
  methods: {
    onMaterialChange([value, record], tableRow) {
      // 初始化数据
      Object.assign(tableRow, {
        materialId: record.materialId,
        materialCode: record.materialCode,
        materialName: record.materialName,
        sap: record.sap,
        unit: record.unit,
        unit_dictText: record.unit_dictText,
        materialType: record.materialType,
        materialType_dictText: record.materialType_dictText,
        perNumber: record.perNumber,
        warehouse: record.warehouse,
        warehouse_dictText: record.warehouse_dictText
      })
      this.dataSource = [...this.dataSource]
    },
    save(record) {
      if (record.number === null || record.number === undefined) {
        this.$message.error('请输入数量')
        return
      }
      record.editable = false
    },
    cancel(record) {
      const target = this.dataSource.find(item => item.tableId === record.tableId)
      if (target) {
        target.editable = false
        if (!target.materialCode) {
          this.dataSource = this.dataSource.filter(item => !(item.tableId === record.tableId))
        }
      }
    },
    edit(record) {
      const newData = [...this.dataSource]
      const target = this.dataSource.find(item => item.tableId === record.tableId)
      if (target) {
        target.editable = true
        this.dataSource = newData
      }
    },
    deleteRecord(record) {
      this.dataSource = this.dataSource.filter(item => !(item.tableId === record.tableId))
    },
    handleAdd() {
      this.dataSource.unshift({ editable: true, tableId: this.getTableId() })
    },
    getTableId() {
      let id = this.dataSource.length
      while (this.tableId.includes(id)) {
        id = id + 1
      }
      return id
    }
  }
}
</script>

<style scoped></style>
